<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>博客首页</title>

    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/customStyle.css">
    <link rel="stylesheet" href="./css/index.css">

    <script src="./js/lib.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/test.js"></script>
    <script src="./js/progress.js"></script>
    <script src="./js/photo.js"></script>
</head>

<body>
    <div class="nav flex justify-between align-center">
        <div class="flex align-center">
            <div class="flex align-center mar-l-20 mar-r-100">
                <img src="./images/logo.png" style="width: 300px; height: auto;" />
            </div>
            
            <ul class="flex font-16 mar-r-100">
                <li class="mar-r-20 current">
                    <a href="./index.html" class="color-white">首页</a>
                </li>
    
                <li class="mar-r-20">
                    <a href="./myBlog.html" class="color-white">我的博客</a>
                </li>
    
                <li>
                    <a href="./publishBlog.html" class="color-white">发布博客</a>
                </li>
            </ul>
    
            <div class="flex align-center">
                <input id="searchInput" type="text" placeholder="请输入标题或关键词" class="bor-radius-3 input-init font-12 h-px-26">
                <div class="flex align-center justify-center w-px-60 h-px-26 bg-50a5ff color-white font-12 mar-l-15 bor-radius-3" onclick="handleSearch()">
                    <span>搜 索</span>
                </div>
            </div>
        </div>

        <div class="flex align-center mar-r-20 color-white" id="weidenglu">
            <span>登录</span>
            <span class="mar-x-5">/</span>
            <span>注册</span>
        </div>

        <div id="yidenglu" class="mar-r-20 color-white">
        </div>
    </div>

    <!-- 列表 -->
    <div class="flex mar-x-15 mar-t-15 mar-b-20">
        <div class="flex-2 mar-r-50">
            <div id="list">
            </div>
            

            <div class="flex mar-t-15 align-center" id="pager">
                <div class="mar-r-10 font-12 color-666 text-nowrap">
                    <span>共</span>
                    <span id="total"></span>
                    <span>条</span>
                </div>

                <div class="mar-r-10 font-12 color-666">
                    <select id="fenye" class="fenye" onchange="handleChangePage(event)"></select>
                </div>

                <div class="flex align-center mar-r-10 font-12" id="yema">
                </div>

                <div class="font-12 color-666 text-nowrap">
                    <span>前往</span>
                    <input type="text" class="w-px-30 fenye text-center" id="pageInput" />
                    <span>页</span>
                </div>
            </div>
        </div>

        <!-- 个人中心部分 -->
        <div class="flex-1 bg-f8f8f8" style="letter-spacing: 1px;">
            <div class="pad-x-15">
                <div class="flex align-center">
                    <div id="photo" class="photo">
                        <!-- <img src="./images/photo_001.jpg" /> -->
                    </div>
                    
                    <div class="mar-l-20">
                        <div class="font-12">
                            <span class="color-666">当前状态：</span>
                            <span id="loginState" class="color-f97629">未登录</span>
                        </div>

                        <div class="font-12 mar-t-5">
                            <span class="color-666">昵称：</span>
                            <span id="nickName" class="color-999999">暂无</span>
                        </div>
                    </div>
                </div>

                <div class="bg-e6a23d font-12 color-fcf9f2 w-px-80 pad-5 mar-t-10">修改个人信息</div>

                <div class="font-12 mar-t-10">
                    <div>
                        <span class="">总创作数量：</span>
                        <span id="articleTotal" class="color-f97629">请先登录</span>
                    </div>

                    <div id="progress" class="mar-t-10">
                        <!-- <div class="h-px-8 bg-50a5ff" style="width: 1px; border-top-left-radius: 10px; border-bottom-left-radius: 10px;"></div>
                        <div class="bg-f8f8f8 w-px-12 h-px-12 radius-50" style="border: 2px #cccccc solid; box-sizing: border-box; position: absolute; left: 1px; top: -2px"></div> -->
                    </div>
                </div>

                <div class="mar-t-20">
                    <div class="font-12 mar-t-10">
                        <span class="color-666">已发布作品数量：</span>
                        <span id="publishTotal" class="color-f97629">请先登录</span>
                    </div>

                    <div class="font-12 mar-t-10">
                        <span class="color-666">被评论文章总数：</span>
                        <span id="commentTotal" class="color-f97629">请先登录</span>
                    </div>

                    <div class="font-12 mar-t-10">
                        <span class="color-666">被点赞文章总数：</span>
                        <span id="likeTotal" class="color-f97629">请先登录</span>
                    </div>

                    <div class="font-12 mar-t-10">
                        <span class="color-666">被吐槽文章总数：</span>
                        <span id="spitTotal" class="color-f97629">请先登录</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer flex justify-center align-center color-white font-16">
        <span>页脚</span>
    </div>

    <script>
        // 监听页码输入框
        document.getElementById('pageInput').addEventListener('keydown', handleEnter)

        // 移除监听
        window.removeEventListener('beforeunload', handleEnter)

        

        // var currentPage = 1
        // var limit = 10
        // var total = listArr.length

        // initPage(currentPage, limit)
        // new Pagination('pager', currentPage, limit, total).init()

        var articleTotal = 50

        new Progress({
            progressId: 'progress',
            height: 8,
            left: articleTotal,
            isDisabled: true
        }).init()

        new Photo({
            photoId: 'photo'
        }).init()

        getInfo()


        // 搜索
        function handleSearch() {
            var searchInputValue = document.getElementById('searchInput').value
            var ininData = JSON.parse(JSON.stringify(listArr))
            var newData = []

            for (var i = 0; i < listArr.length; i++) {
                if (listArr[i].title.indexOf(searchInputValue) !== -1) {
                    newData.push(listArr[i])
                }
            }

            listArr = newData
            
            initPage()
            initYema()
            document.getElementById('total').innerText = listArr.length
        }
    </script>
</body>
</html>